import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import { ListItem } from 'material-ui/List';
import FontIcon from 'material-ui/FontIcon';
import Subheader from 'material-ui/Subheader';
import IconButton from 'material-ui/IconButton';
import FlatButton from 'material-ui/FlatButton';
import { grey400 } from 'material-ui/styles/colors';

import { Link } from 'react-router';
import CONFIG from '../../config';
import { moment } from '../Utils/Helper';
import { parseJSON, postJsonMethod } from '../../redux/Helper';

export default class NotificationCard extends Component {

  /**
   * 允许用户加入活动,之后使is_joined=1
   */
  join = (companionId, activityId) => {
    let request = `?token=${this.props.token}`;
    let url = `${CONFIG.apiHost}/api/activity/join/${activityId}${request}`;
    let postData = {
      user_id: this.props.userId,
      companion_id: companionId
    };

    fetch(url, postJsonMethod(postData))
    .then(this.props.handleClickJoin(this.props.index))
  };

  /**
   * 渲染通知的图标
   * join_succeed、add_friend_succeed、new_activity_apply
   */
  renderType = (type, jsonStr) => {
    let iconName;
    let imgSrc;
    let detail;

    if (jsonStr) {
      detail = JSON.parse(jsonStr);
    }

    switch(type)
    {
      case 'join_succeed':
        iconName = 'icon-insert_invitation';
        imgSrc = null;
        break;

      case 'add_friend_succeed':
        iconName = null;
        imgSrc = detail.user_img;
        break;

      case 'new_activity_apply':
        iconName = null;
        imgSrc = detail.user_img;
        break;

      default:
        break;
    }

    return (
      <Avatar
        src={imgSrc}
        icon={
          <FontIcon className={iconName} />
        }
        style={{margin: 16}}
        backgroundColor={this.props.color500}
      />
    );
  };

  /**
   * 通知内容
   */
  renderdetail = (item) => {
    // 活动标题
    let title;
    // 加好友描述
    let sign;
    // 转化
    let detail;
    if (item.detail) {
      detail = JSON.parse(item.detail);
    }
    
    let isDisabled = false;

    switch(item.type)
    {
      case 'join_succeed':
        title = detail.title;
        sign = detail.sign;
        break;

      case 'add_friend_succeed':
        title = detail.user_name;
        sign = detail.sign;
        break;

      case 'new_activity_apply':
        title = detail.user_name;
        sign = <span>
          {detail.user_name}申请加入你的活动
          <b> {detail.title} </b>
          是否同意？
        </span>;
        break;

      default:
        break;
    }

    if (item.status) isDisabled = true;

    return (
      <ListItem
        primaryText={title}
        disabled={isDisabled}
        secondaryText={
          <p>
            {sign}
          </p>
        }
        secondaryTextLines={2}
        onClick={this.props.handleClick.bind(this, item.id, this.props.index, isDisabled)}
      />
    );
  };

  /**
   * 对通知的操作
   * 仅new_activity_apply
   */
  renderActions = (item) => {
    let detail;
    let isDisabled = false;
    if (item.detail) {
      detail = JSON.parse(item.detail);
    }
    
    if (detail.is_joined) isDisabled = true;

    let actions = [
      <FlatButton 
        key={1} 
        label="查看" 
        icon={<FontIcon className="icon-open_in_new" />}
        onTouchTap={this.props.pushTo.bind(this, `/activity/show/${detail.activity_id}`)}
      />,
      <FlatButton 
        key={2} 
        label={isDisabled ? '已加入' : '同意'}
        disabled={isDisabled}
        icon={<FontIcon className="icon-check" />}
        onTouchTap={this.join.bind(this, detail.user_id, detail.activity_id)}
      />
    ];
    if (item.type === 'new_activity_apply') {
      return <div>
        <Divider style={{marginTop: 16}} />
        {actions}
      </div>;
    }
    return;
  };

  render() {
    const {item, createdAt} = this.props;

    let paper = {
      minHeight: 88,
      position: 'relative',
      backgroundColor: item.status ? '#EEEEEE' : '#fff'
    };

  	return (
      <div style={{width: '100%'}}>
        <div 
          className='card-line center-block'
          style={{
            maxWidth: 640,
            marginTop: 0,
            paddingLeft: '0.5rem',
            paddingRight: '0.5rem'
          }}
        >
          <Subheader style={{
            paddingLeft: 0,
            color: grey400
          }}>
            {createdAt}
          </Subheader>
          <Paper style={paper} zDepth={item.status ? 0 : 1}>
            <div style={styles.list}>
              <div style={styles.left}>
                {this.renderType(item.type, item.detail)}
              </div>
              {this.renderdetail(item)}
              {this.renderActions(item)}
            </div>
            
            <IconButton 
              iconClassName="icon-close"
              iconStyle={{fontSize: 16}}
              style={styles.close}
              onClick={this.props.handleDel.bind(this, item.id, this.props.index)}
            />
          </Paper>
        </div>
      </div>
  	);
  }
};

const styles = {
  close: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 36,
    height: 36,
    padding: 10
  },
  list: {
    minHeight: 88,
    paddingLeft: 72,
  },
  left: {
    position: 'absolute',
    top: 0,
    left: 0
  },
}